<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="lib/animate/animate.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="lib/jquery/jquery.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/main.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 头部区域 -->
    <header id="header">

        <!-- 导航 -->
        <nav class="navbar navbar-mznav navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#A">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">麦子学院</a>
                    </div>
                    <div class="collapse navbar-collapse" id="A">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="">
                                <a href="#">首页</a>
                            </li>
                            <li>
                                <a href="#">论坛</a>
                            </li>
                            <li>
                                <a href="#">前端开发</a>
                            </li>
                            <li>
                                <a href="#">最新课程</a>
                            </li>
                            <li>
                                <a href="#">移动APP</a>
                            </li>
                            <li>
                                <a href="#">联系我们</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <!-- /导航 -->


    </header>
    <!-- /头部区域 -->
    <!-- home -->
    <section id="home">
        <div class="lvjing">
            <div class="container">
                <div class="row wow animated bounceIn">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <h1 class="title">bootstrap实战课程等你来战！</h1>
                        <p class="content">本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员
                            <br> 培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！
                        </p>


                        <a href="#">
                            <img src="images/php.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-1"></div>
                </div>

            </div>
        </div>
    </section>
    <!-- /home -->
    <!-- 论坛 -->
    <section id="bbs" class="wow animated bounceInUp">
        <div class="container">
            <div class="row">
                <div class="col-md-4 com-xs-12">
                    <a href="#">
                        <img src="images/a.png" alt="">
                        <h3>安卓开发</h3>
                        <p>Android开发技术交流、问题求助、实战案例分享</p>
                    </a>
                </div>
                <div class="col-md-4 com-xs-12">
                        <a href="#">
                            <img src="images/b.png" alt="">
                            <h3>安卓开发</h3>
                            <p>Android开发技术交流、问题求助、实战案例分享</p>
                        </a>
                    </div>
                    <div class="col-md-4 com-xs-12">
                            <a href="#">
                                <img src="images/i.png" alt="">
                                <h3>安卓开发</h3>
                                <p>Android开发技术交流、问题求助、实战案例分享</p>
                            </a>
                        </div>
            </div>
        </div>
    </section>
    <!-- 前端开发 -->
    <section id="web">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xs-12  wow animated bounceInLeft">
                    <h3>HTML5前端开发</h3>
                    <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                    <p><i class="iconfont icon-shu"></i>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
                    <p><i class="iconfont icon-shu"></i>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
                </div>
                <div class="col-md-6 col-xs-12 wow animated bounceInLeft">
                    <img src="images/html5.jpg" alt="">
                </div>
            </div>
        </div>
    </section>
    <!--/前端开发 -->
    <!-- bs -->
    <section id="bs">
            <div class="container">
                <div class="row">
                        <div class="col-md-6 col-xs-12 wow animated bounceInLeft">
                                <img src="images/Bootstrap.jpg" alt="">
                            </div>
                    <div class="col-md-6 col-xs-12  wow animated bounceInLeft">
                        <h3>bootstrap实战视频教程</h3>
                        <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目！</p>
                        <p><i class="iconfont icon-shu"></i>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。</p>
                        <p><i class="iconfont icon-shu"></i>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。</p>
                    </div>
                    
                </div>
            </div>
        </section>
    <!-- /bs -->
    <!-- 最新课程 -->
    <section id="course">
        <div class="container">
            <h3>最新课程</h3>
            <div class="row wow bounceIn">
                <div class="col-md-3 col-xs-12">
                    <div class="course">
                            <img src="images/swift.jpg" alt="">
                            <a href="#" class="btn btn-default">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3">
                        <div class="course">
                                <img src="images/swift.jpg" alt="">
                                <a href="#" class="btn btn-default">加入学习</a>
                        </div>
                    </div>
                    <div class="col-md-3">
                            <div class="course">
                                    <img src="images/swift.jpg" alt="">
                                    <a href="#" class="btn btn-default">加入学习</a>
                            </div>
                        </div>
                        <div class="col-md-3">
                                <div class="course">
                                        <img src="images/swift.jpg" alt="">
                                        <a href="#" class="btn btn-default">加入学习</a>
                                </div>
                            </div>
                            <div class="col-md-3">
                                    <div class="course">
                                            <img src="images/swift.jpg" alt="">
                                            <a href="#" class="btn btn-default">加入学习</a>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                        <div class="course">
                                                <img src="images/swift.jpg" alt="">
                                                <a href="#" class="btn btn-default">加入学习</a>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                            <div class="course">
                                                    <img src="images/swift.jpg" alt="">
                                                    <a href="#" class="btn btn-default">加入学习</a>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                                <div class="course">
                                                        <img src="images/swift.jpg" alt="">
                                                        <a href="#" class="btn btn-default">加入学习</a>
                                                </div>
                                            </div>
            </div>
        </div>
    </section>
    <!-- /最新课程 -->
    <!-- app -->
    <section id="app" class="wow fadeInLeftBig">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-xs-12  wow animated bounceInLeft">
                        <h3>麦子学院移动APP下载</h3>
                        <p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
                        <div class="download">
                                <span class="btn btn-default">iphong版</span>
                                <span class="btn btn-default">android版</span>
                        </div>
                    </div>
                    <div class="col-md-6 col-xs-12 wow animated bounceInLeft">
                        <img src="images/app-banner.jpg" alt="" width="555" height="300">
                    </div>
                </div>
            </div>
        </section>
    <!-- /app -->
    <!-- 联系我们 -->
    <section id="contact" class="wow bounceIn">
        <div class="lvjing">
                <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <h3> 联系小麦</h3>
                                <p>麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来
                                    自五 湖四海伙伴们热情和踏实的学习态度！
                                </p>
                                    <div><i class="iconfont icon-fangzi"></i>地址:成都市高新区天府软件园D5-11</div>
                                    <div><i class="iconfont icon-fangzi"></i>联系电话：028-86567913</div>
                                    <div><i class="iconfont icon-fangzi"></i>邮箱:hr@maiziedu.com</div>
                            </div>
                            <div class="col-md-6">
                                <form action="#" method="POST">
                                    <div class="col-md-6"><input class="form-control" type="text" name="" id="name" placeholder="您的名字"></div>
                                    <div class="col-md-6"><input class="form-control" type="email" name="" id="email" placeholder="您的邮箱"></div>
                                    <div class="col-md-12"><input class="form-control" type="text" name="" id="" placeholder="标题"></div>
                                    <div class="col-md-12"><textarea class="form-control" name="" id="" cols="30" rows="4" placeholder="留言"></textarea></div>
                                    <div class="col-md-8"><input type="submit" class="form-control" value="提交"></div>
                                </form>
                            </div>
                        </div>
                    </div>
        </div>
    </section>
    <!-- /联系我们 -->
    <!-- 脚注部分 -->
    <footer id="footer">
        <p>Copyright © 2012-2015  www.maiziedu.com  蜀ICP备13014270号-4</p>
    </footer>
    <!-- 脚注部分 -->

    
    <script src="lib/wow.min.js"></script>
    <script>
        $(function (){
            new WOW().init();
        })
    </script>

</body>

</html>